<!--
 * @Author: wwj 3342930399@qq.com
 * @Date: 2024-03-07 17:26:00
 * @LastEditors: wwj 3342930399@qq.com
 * @LastEditTime: 2024-03-24 19:50:13
 * @FilePath: \vue\src\views\Main\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="Myindex">
    <a-layout
      id="components-layout-demo-top-side-2"
      style="height: 100%; width: 100%"
    >
      <a-layout-header class="header">
        <div class="logo">教务管理系统</div>

        <!-- <a-menu
          theme="dark"
          mode="horizontal"
          :default-selected-keys="['2']"
          :style="{ lineHeight: '64px' }"
        >
          <a-menu-item key="1"> nav 1 </a-menu-item>
          <a-menu-item key="2"> nav 2 </a-menu-item>
          <a-menu-item key="3"> nav 3 </a-menu-item>
        </a-menu> -->
        <div class="iconList">
          <div class="icon">
            <a-icon type="bell" />
            <span class="text">消息通知</span>
          </div>
          <template>
            <a-popover>
              <template slot="content">
                <p>账号信息</p>
                <p @click="goOut">退出登录</p>
              </template>
              <div class="icon">
                <a-icon type="user" @click="visible = !visible" />
                <span class="text">个人中心</span>
              </div>
            </a-popover>
          </template>
        </div>
      </a-layout-header>

      <a-layout>
        <a-layout-sider width="200" style="background: #fff">
          <a-menu
            mode="inline"
            :default-selected-keys="['1']"
            :default-open-keys="['sub1']"
            :style="{ height: '100%', borderRight: 0 }"
          >
            <a-sub-menu key="sub1">
              <span slot="title"><a-icon type="home" />首页</span>
              <a-menu-item key="1" @click="goToPage('/main/home')">
                首页
              </a-menu-item>
            </a-sub-menu>
            <a-sub-menu key="sub2">
              <span slot="title"><a-icon type="message" />信息管理</span>
              <a-menu-item key="2" @click="goToPage('/message/student')">
                学生信息
              </a-menu-item>
              <a-menu-item key="3" @click="goToPage('/message/curriculum')">
                课表信息
              </a-menu-item>
              <a-menu-item key="4" @click="goToPage('/message/invigilate')">
                监考信息
              </a-menu-item>
            </a-sub-menu>
            <a-sub-menu key="sub3">
              <span slot="title"><a-icon type="file-done" />成绩管理</span>
              <a-menu-item key="5" @click="goToPage('/score/index')">
                学生成绩
              </a-menu-item>
            </a-sub-menu>
            <a-sub-menu key="sub4">
              <span slot="title"><a-icon type="solution" />申请管理</span>
              <a-menu-item key="6" @click="goToPage('/apply/leave')">
                请假申请
              </a-menu-item>
              <a-menu-item key="7" @click="goToPage('/apply/adjuest')">
                调课申请
              </a-menu-item>
            </a-sub-menu>
            <a-sub-menu key="sub5">
              <span slot="title"><a-icon type="sound" />通知管理</span>
              <a-menu-item key="8" @click="goToPage('/main/notice')">
                学校通知
              </a-menu-item>
            </a-sub-menu>
            <a-sub-menu key="sub" v-if="is_admin == 1">
              <span slot="title"><a-icon type="team" />用户管理</span>
              <a-menu-item key="9" @click="goToPage('/main/teacher')">
                用户
              </a-menu-item>
            </a-sub-menu>
          </a-menu>
        </a-layout-sider>
        <a-layout style="padding: 0 24px 24px">
          <a-breadcrumb :routes="routes">
            <template
              slot="itemRender"
              slot-scope="{ route, params, routes, paths }"
            >
              <span v-if="routes.indexOf(route) === routes.length - 1">
                {{ route.breadcrumbName }}
              </span>
              <router-link v-else :to="`${paths.join('/')}`">
                {{ route.breadcrumbName }}
              </router-link>
            </template>
          </a-breadcrumb>
          <br />
          {{ $route.path }}
          <a-layout-content
            :style="{
              background: '#fff',
              padding: '24px',
              margin: 0,
              minHeight: '280px',
            }"
          >
            <router-view></router-view>
          </a-layout-content>
        </a-layout>
      </a-layout>
    </a-layout>
  </div>
</template>
<script>
import { getNameMixin } from "../../utils/mixins";

export default {
  mixins: [getNameMixin],
  data() {
    return {
      collapsed: false,
      visible: false,
      basePath: "/main",
      routes: [
        {
          path: "home",
          breadcrumbName: "home",
        },
        {
          path: "message",
          breadcrumbName: "message",
          children: [
            {
              path: "/student",
              breadcrumbName: "student",
            },
            {
              path: "/curriculum",
              breadcrumbName: "curriculum",
            },
            {
              path: "/invigilate",
              breadcrumbName: "invigilate",
            },
          ],
        },
        {
          path: "score",
          breadcrumbName: "score",
          children: [
            {
              path: "/index",
              breadcrumbName: "index",
            },
          ],
        },
        {
          path: "apply",
          breadcrumbName: "apply",
          children: [
            {
              path: "/leave",
              breadcrumbName: "leave",
            },
            {
              path: "/adjuest",
              breadcrumbName: "adjuest",
            },
          ],
        },
        {
          path: "notice",
          breadcrumbName: "notice",
        },
      ],
      is_admin: "",
    };
  },
  created() {
    if (localStorage.getItem("is_admin")) {
      this.is_admin = localStorage.getItem("is_admin");
    }
    if (!localStorage.getItem("Token")) {
      this.$router.push({ name: "404" });
    }
  },
  methods: {
    goOut() {
      if (localStorage.getItem("is_admin")) {
        localStorage.removeItem("is_admin");
      }
      if (localStorage.getItem("Token")) {
        localStorage.removeItem("Token");
      }
      if (localStorage.getItem("User_info")) {
        localStorage.removeItem("User_info");
      }
      this.$router.push({ name: "login" });
    },
  },
};
</script>

<style lang="scss" scoped>
.Myindex {
  width: 100%;
  height: 100%;
  #components-layout-demo-top-side-2 {
    width: 120px;
    height: 31px;
    background: rgba(255, 255, 255, 0.2);

    float: left;

    .logo {
      font-weight: 600;
      color: #fff;
      font-size: 20px;
    }

    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .iconList {
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      color: #fff;
      font-size: 20px;
      .icon {
        margin: 0 10px;
      }
      .text {
        font-size: 16px;
      }
    }
  }
}

::v-deep .ant-layout-header {
  background-color: #1890ff;
}
</style>
